<!-- index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue</title>
  <!-- CSS -->
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Vue 备忘录</a>
    </div>
  </nav>
 <!-- 应用的主要部分 -->
  <div class="container" id="events">
    <!-- 添加一个表单  -->
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>Add an Event</h3>
        </div>
        <div class="panel-body">
               <div class="form-group">
                    <input class="form-control" placeholder="事件名称" v-model="event.name">
               </div>
               <div class="form-group">
                   <textarea class="form-control" placeholder="事件描述" v-model="event.description"></textarea>
               </div>
               <div class="form-group">
                   <input type="date" class="form-control" placeholder="Date" v-model="event.date">
               </div>
              <button class="btn btn-primary" @click="addEvent">提交</button>
        </div>
      </div>
    </div>
    <!-- 展示备忘录的内容  -->
    <div class="col-sm-6">
      <div class="list-group">
                  <a href="#" class="list-group-item" v-for="(data,index) in events">
                      <h4 class="list-group-item-heading">
                          <i class="glyphicon glyphicon-bullhorn"></i>
                          {{ data.name }}--- {{index}}
                      </h4>
                      <h5>
                          <i class="glyphicon glyphicon-calendar" v-if="data.date"></i>
                          {{ data.date }}
                      </h5>
                      <p class="list-group-item-text" v-if="data.description">{{ data.description }}</p>
                      <button class="btn btn-xs btn-danger" @click="deleteEvent(index)">Delete</button>
                  </a>
      </div>
    </div>
  </div>
  <!-- JS -->
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>